<template>
  <div ref="lottieContainer" class="lottie-container"></div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import lottie from "lottie-web";

// 定义 props
const props = defineProps({
  animationData: {
    type: Object,
    required: true
  },
  loop: {
    type: Boolean,
    default: true
  },
  autoplay: {
    type: Boolean,
    default: true
  },
  renderer: {
    type: String,
    default: "svg" // 可选值：'svg', 'canvas', 'html'
  }
});

const lottieContainer = ref(null); // 容器引用
let animationInstance = null; // Lottie 动画实例

// 初始化 Lottie 动画
onMounted(() => {
  if (lottieContainer.value) {
    animationInstance = lottie.loadAnimation({
      container: lottieContainer.value, // 动画容器
      renderer: props.renderer, // 渲染方式
      loop: props.loop, // 是否循环
      autoplay: props.autoplay, // 是否自动播放
      animationData: props.animationData // 动画数据
    });
  }
});

// 组件卸载时销毁动画
onBeforeUnmount(() => {
  if (animationInstance) {
    animationInstance.destroy();
  }
});

// 暴露动画实例，方便父组件控制
defineExpose({
  animationInstance
});
</script>

<style scoped>
.lottie-container {
  width: 100%;
  height: 100%;
}
</style>
